<template>

    <div>
        <div class="header-sum-card">
            <div>
                <Row :gutter="20" class="mt10">
                    <Col class="mb10" :lg="24" :md="24" :sm="24" :xs="24">
                        <Alert type="success" show-icon>
                            欢迎您进入管理后台
                            <p slot="desc">
                                <span>当前时间为：{{currentDataString}}</span>
                            </p>
                        </Alert>
                        <h2 class="mt20">全局数据统计</h2>
                        <Row :gutter="10" class="mt10">
                            <Col class="mb10" :lg="12" :md="12" :sm="24" :xs="24">
                                <Card>
                                    <p slot="title">
                                        <Icon type="ios-megaphone-outline" />
                                        公告栏
                                    </p>
                                    <Button slot="extra" type="primary" ghost icon="ios-add-circle-outline" @click="addNotice()">添加</Button>
                                    <Table border :columns="noticeHeadList" :data="noticeList"></Table>
                                </Card>
                                <!--                        分页导航栏-->
                                <div style="text-align: center;margin-top: 10px;">

                                    <Page v-show="this.totals===0?false:true" :total="totals" show-sizer @on-change="page"
                                          @on-page-size-change="changePageSize" :page-size-opts="[8,16,24]" :page-size="8"/>
                                </div>

                            </Col>
                            <Modal
                                    :title="title"
                                    v-model="noticeModel"
                                    :closable="false"
                                    @on-ok="editNotice()"
                            >
                                <p>
                                    <Input v-model="notice.weight" placeholder="请输入该公告的权值..." style="width: 100%"/>
                                    <Input v-model="notice.content" placeholder="请输入公告的内容..." style="width: 100%"/>
                                </p>

                            </Modal>
                            <Col class="mb10" :lg="12" :md="12" :sm="24" :xs="24">
                                <Card title="今日IP数" class="tc">
                                    <span class="num">56,000</span>
                                </Card>
                            </Col>

                        </Row>
                    </Col>
                </Row>
            </div>

        </div>
    </div>

</template>
<script>
    export default {
        data() {
            return {
                currentDataString: new Date(),
                noticeList:[],
                //列表项数组
                noticeHeadList: [
                    {
                        title: '编号',
                        align: 'center',
                        key: 'id',
                    },
                    {
                        title: '公告权值',
                        align: 'center',
                        key: 'weight'
                    },
                    {
                        title: '内容',
                        align: 'center',
                        key: 'content'
                    },
                    {
                        title: '操作',
                        key: 'action',
                        align: 'center',
                        render: (h, params) => {
                            return h('div', [
                                h('Button', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        // marginRight: '5px'
                                    },
                                    on: {
                                        click: () => {
                                            this.show(params)
                                        }
                                    }
                                }, '编辑'),
                                h('Button', {
                                    props: {
                                        type: 'error',
                                        size: 'small'
                                    },
                                    on: {
                                        click: () => {
                                            this.remove(params)
                                        }
                                    }
                                }, '删除')
                            ]);
                        }
                    }
                ],
                //公告 过度值
                notice: {},

                //控制公告修改框的弹出
                noticeModel: false,
                //弹出窗的标题
                title: '',
                //分页
                totals: 0,
            }
        },
        created() {
            this.getNoticeList()
        },
        methods:{
            //添加公告
            addNotice() {
                this.title = '添加新的公告';
                this.noticeModel = !this.noticeModel;

            },
            //修改公告
           async editNotice(){
                const {data: result} = await this.$http.post("saveNotice", this.notice)
                if (result.code === 200) {
                    this.$Message.success(result.message)
                    this.getNoticeList()

                } else {
                    this.$Message.error(result.message)
                }

            },
            //打开编辑页查询对应的标签信息
            async show(params) {
                this.title = "修改公告信息"
                this.noticeModel = !this.noticeModel;
                const {data: result} = await this.$http.get("getNoticeById/" + params.row.id)
                if (result.code === 200) {
                    this.notice = result.data;
                }else {
                    this.$Message.error(result.message)

                }
            },
            //删除改标签信息
            async remove(params) {
                const {data: result} = await this.$http.get("deleteNoticeById/" + params.row.id)
                if (result.code === 200) {
                    this.$Message.success(result.message)
                    location.reload()
                } else {
                    this.$Message.error(result.message)
                }


            },
            //获取标签列表
            async getNoticeList() {
                const {data: result} = await this.$http.get("getNoticeList/0/8")
                if (result.code === 200) {
                    this.noticeList = result.data.content
                    this.totals = result.data.totalElements;
                    this.notice = {};
                } else {
                    this.$Message.error(result.message)
                }


            },

            //分页方法
            async page(currentPage) {
                const {data: result} = await this.$http.get("getNoticeList/" + (currentPage - 1) + "/8");
                if (result.code === 200) {
                    this.noticeList = result.data.content;
                    this.totals = result.data.totalElements;
                }
            },
            //改变每页显示条数的方法
            async changePageSize(pageSize) {
                const {data: result} = await this.$http.get("getNoticeList/0/" + pageSize);
                if (result.code === 200) {
                    this.noticeList = result.data.content;
                    this.totals = result.data.totalElements;
                }
            },
        },


    }
</script>
<style scoped lang="less">
    .mt10 {
        margin-top: 10px;
    }

    .tc {
        text-align: center
    }

    .header-sum-card {
        font-family: 幼圆;
    }
</style>
